<template>
<div>
    <div class="title">周末去哪儿</div>
    <ul class="title-ul">
        <li class="item border-bottom" v-for="item of list" :key="item.index">   
            <div class="item-img-wrapper">         
                <img class="item-img" :src="item.imgUrl"/>
                </div>                
                <div class="item-info">
                    <p class="item-title">
                       {{item.title}}
                    </p>
                    <p class="item-mioahsu">
                       {{item.miaoshu}}
                    </p>
                 
                 
                </div>
        </li>
    </ul>
</div>
  
</template>

<script>
export default {
    name:'HomeWeekend',
    props: {
        list:Array
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/ellipsis.styl';
.title{
     margin-top: 0.15rem;
    line-height: 0.8rem;
    background: white;
    text-indent: 0.2rem;
  
    border-radius: 10px;
}
.item-img-wrapper{
    height :0;
    overflow:hidden;
    padding-bottom 33.9%;

}
.item-img{
  width :100%;
}
.item-info{
    flex: 1;
    padding: 0.1rem;

}
.item-title{
    line-height: 0.55rem;
    font-size:0.32rem
}
.item-desc{
    line-height: 0.4rem;
    color: black;
    opacity: 0.5;
}
.item-button{
    background: #ff9300;
    padding: 0 0.1rem;
    border-radius: 0.1rem;
    color: white;
        margin-top: 0.1rem;

}
.title-ul{
    background:white;

}
.item-mioahsu{
    font-size :0.2rem;
    line-height 0.3rem;
    opacity 0.8
}
</style>
